<template>
  <div>
    <hry-header title="提现" :showBackBtn="true">
      <div slot="content" class="withdraw">
        <div class="common-style"></div>
        <div class="form-wrapper">
          <form novalidate @submit.prevent="withdraw">
            <md-field>
              <input-validate
                type="money"
                v-model="form.money"
                title="提现金额(元)："
                placeholder="请输入提现金额"
                v-validate="'required|money'"
                data-vv-value-path="innerValue"
                data-vv-validate-on="input"
                data-vv-as="提现金额"
                name="money"
                :error="errors.first('money')"
              ></input-validate>
              <md-field-item
                style="height: 30pt;padding: 0"
                title="到账银行卡:"
                :content="form.bankName"
                @click="showSelector"
                arrow
                solid
              />
              <md-input-item
                type="money"
                v-model="form.realMoney"
                title="到账金额(元)："
                placeholder="请输入到账金额"
                readonly
              ></md-input-item>
              <input-validate
                type="password"
                title="支付密码："
                v-model="form.password"
                placeholder="请输入支付密码"
                v-validate="'required'"
                data-vv-value-path="innerValue"
                data-vv-validate-on="input"
                data-vv-as="支付密码"
                name="password"
                :error="errors.first('password')"
              ></input-validate>
            </md-field>
            <md-selector
              v-model="isSelectorShow"
              :default-value="defaultBankId"
              :data="data"
              max-height="320px"
              title="到账银行卡"
              @choose="onSelectorChoose"
            ></md-selector>
            <div style="text-align: center">
              <a-button
                type="primary"
                block
                html-type="submit"
                :disabled="
                  data.length === 0 || !isSetPay || disabled ? true : false
                "
                >确认提现</a-button
              >
              <span class="alarm-text">注：最低提现金额100元</span><br />
              <span
                v-if="!isMobile"
                class="text-warning"
                @click="$commonJs.goPage('personResetAthPhone')"
                >您尚未认证手机，暂不能提现，点击去设置</span
              >
              <span
                v-if="isMobile && !isSetPay"
                class="text-warning"
                @click="$commonJs.goPage('personResetPayPsw')"
                >您尚未设置支付密码，暂不能提现，点击去设置</span
              >
            </div>
          </form>
        </div>
      </div>
    </hry-header>
  </div>
</template>

<script>
import { InputItem, Field, Selector, FieldItem } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.money("money", "最低提现金额100元");
export default {
  name: "recharge",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Selector.name]: Selector,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    hryHeader: () => import("@/components/contentWrapper/index")
  },
  data() {
    return {
      defaultBankId: "",
      isSelectorShow: false,
      data: [],
      form: {
        money: null,
        realMoney: null,
        bankName: "",
        bankId: "",
        password: ""
      },
      disabled: false
    };
  },
  methods: {
    showSelector() {
      this.isSelectorShow = true;
    },
    onSelectorChoose({ text, value }) {
      this.form.bankName = text;
      this.form.bankId = value;
    },
    getBankList() {
      this.$ajax
        .post(this.$api.rechargeBankList, {
          type: 1
        })
        .then(res => {
          this.formatData(res.data.card_list);
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    formatData(data) {
      data.forEach(item => {
        let obj = {};
        obj.text = item.bank_number + "【" + item.bank_name + "】";
        obj.value = item.id;
        this.data.push(obj);
      });
      if (data.length > 0) {
        this.defaultBankId = this.data[0].value;
        this.form.bankName = this.data[0].text;
        this.form.bankId = this.data[0].value;
      }
    },
    withdraw() {
      this.$validator.validate().then(result => {
        if (result) {
          this.disabled = true;
          this.$ajax
            .post(
              this.$api.getCash,
              {
                money: this.form.money,
                bank_id: this.form.bankId,
                pay_money: this.form.realMoney,
                pay_password: this.form.password
              },
              false,
              "提现中..."
            )
            .then(res => {
              this.disabled = false;
              this.$message.success(res.data.msg);
              this.$router.go(-1);
            })
            .catch(err => {
              this.disabled = false;
              this.$message.error(err);
            });
        }
      });
    }
  },
  created() {
    this.getBankList();
  },
  watch: {
    "form.money": function(value) {
      let money = parseFloat(value);
      this.form.realMoney = (money - 1.5).toFixed(2);
    }
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile;
    },
    isSetPay() {
      return this.$store.state.isSetPay;
    }
  }
};
</script>

<style scoped lang="less">
.form-wrapper {
  padding: 0 62px;
  .ant-btn {
    margin-top: 117px;
    height: 75px;
    font-size: 30px;
    margin-bottom: 20px;
  }
  .text-warning {
    font-size: 20px;
    display: inline-block;
    margin-top: 39px;
  }
}
</style>
